React = require('react')
# Card = require('antd-mobile/lib/card')
# Flex = require('antd-mobile/lib/flex')
# Icon = require('antd-mobile/lib/icon')
Toast = require('antd-mobile/lib/toast')

RefreshControl = require('antd-mobile/lib/refresh-control')
TimerMixin = require('react-timer-mixin')
{View,TouchableNativeFeedback,InteractionManager,Image,Text,ScrollView,ListView,TouchableHighlight,StyleSheet,Navigator,TouchableOpacity,ActivityIndicator} = require('react-native')
# ListView = require('antd-mobile/lib/list-view')

Dimensions = require('Dimensions')
{IndexedList} = ListView
{ width, height } = Dimensions.get('window')
{View} = require('react-native')
{fetchGetList,fetchRefreshList} = require('../actions/page_bwss.js')
{connect} = require('react-redux')
moment = require('moment')
_ = require('underscore')

backImg = require('../img/back.png')
searchIcon = require('../img/search_white.png')
{Echarts} = require('native-echarts/src/components/index.js')


Page_eChart = React.createClass
  mixins:[TimerMixin]
  getInitialState:->
    {}
  _renderBody:->
    option =
      title:
          text: 'ECharts demo'
      tooltip: {}
      legend:
          data:['销量']
      xAxis:
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      yAxis: {}
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
    <Echarts option={option} height={300} />
  _renderListHeader:->
    if @props.connected is false and @props.list.length>0
      <TopNotice mode="closable" style={{margin:10}}>
        无网络连接，您现在看到的是离线缓存数据
      </TopNotice>
  _renderHeader:->
      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          <Text style={{fontSize:20,color:'#ffffff'}}>图表</Text>
        </View>

        <View style={{flex:1,alignItems:'flex-end',padding:10}}>
          <TouchableOpacity onPress={@_showActionSheet}>
          </TouchableOpacity>
        </View>
      </View>
  componentDidMount:->
    that = @
    fetch('http://172.16.46.161:801/Report/YinHangYuanDrmcData',{
                method: 'GET'
                mode: 'cors'
                cache: 'default'
              })
            .then (res)->
              if res.ok is true
                res.json()
              else
                new Promise.reject()
            .then (json)->
              that.setState fetchData:json
            .catch (err)->
              Toast.fail(err.message)
  _renderBody2:->
      if @state.fetchData
        resultdata = @state.fetchData
        g = _.groupBy resultdata,'name'
        title = _.keys(g)
        option =
            title : {
            text: '上海港引航站引航员日名次动态',
            x:'center'
            },
            tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
            }
            series : [
                {
                    name: '动态',
                    type: 'pie',
                    radius : '75%',
                    center: ['50%', '60%'],
                    data:resultdata
                    }
            ]
        <Echarts option={option} height={300} />
      else
        <View/>
  render:->
    <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff',paddingBottom:10}>
      {@_renderHeader()}
      <View  style={{height:1,width:width,backgroundColor:'#CCCCCC'}}/>
      <View style={{flex:1}}>
        {@_renderBody()}
      </View>
    </View>


      # {@_renderHeader()}
      # <View  style={{height:1,width:width,backgroundColor:'#CCCCCC'}}/>
      # <View style={{flex:1}}>
      #   {@_renderBody()}


styles = StyleSheet.create
  row:
    flexDirection:'column'
    justifyContent:'center'
    padding:5
    backgroundColor:'#F6F6F6'
  text:
    flex:1

module.exports = Page_eChart
